﻿
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
  <title>CS4380 Yahoo! YUI Testing</title> 
<style type="text/css"> 
body {
	margin:0;
	padding:0;
}
</style> 
 
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.4.1/build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

</head> 
 
<body class="yui3-skin-sam  yui-skin-sam"> 

<h1>My YUI Table</h1> 
 
<div id="myTable"></div> 
 
<script type="text/javascript">
	YUI().use("datasource", "datatable", function (Y) {

		// url to get data
		var url = "../scripts/proxyBlog.cgi?method=getPost&author=51158405&type=json";
		
		// DataSource.IO retrieve via same-domain script
		var dataSource = new Y.DataSource.IO({
			source: url
		});

		// define the correct schma for the plugin
		dataSource.plug(Y.Plugin.DataSourceJSONSchema, {
			schema: {
				resultListLocator: "BlogList",
				resultFields: ["id", "author", "title", "content", "updated"]
			}
		});

		// make sure the data returns as expected
		dataSource.sendRequest({
			callback: {
				success: function(e) {
					Y.log(e);
				}
			}
		});
		
		// define columns to be shown
		var cols = ["id", "author", "title", "content", "updated"]
		
		// create a DataTable using the columns
		var table = new Y.DataTable.Base({
			columnset: cols,
			summary:"Blog list of 51158405",
			caption:"Table with JSON data from proxyBlog.cgi"
		});

		// plug the instance with the DataTableDataSource plugin, point to your DataSource instance
		table.plug(Y.Plugin.DataTableDataSource, {
			datasource: dataSource
		}).render("#myTable");

		// load the data via the plugin
		table.datasource.load();

	});
</script>

</body>
</html>
